<template>
    <!-- 
        v-on用来绑定点击事件 v-on：事件名="方法名"
        v-on可以简写@ 
    -->
    <div>
        <button v-on:click="handle">点击</button>
        <!-- $event 获取事件对象 -->
        <button @click="add(1,$event)">点击事件</button>
        <!-- 绑定其他事件 一个事件两个方法 用分号隔开 -->
         <div @mouseenter="handle();two()">鼠标移入事件</div>
         <!-- enter 修饰符 松开回车触发 -->
         <input type="text" @leyup.enter="show">
         <!-- 
            阻止事件冒泡
         -->
            <div class="father" @click="father">
                <div class="son" @click.stop="son"></div>
            </div>

            <!-- 
                阻止默认事件
            -->
                <a href="http://www.baidu.com" @click.prevent="">百度一下</a>
    </div>
</template>
<script>
    export default {
        data(){
            return{

            }
        },
        methods:{
            handle(){
                console.log("我被点击了")
            },
            add(val,e){
                console.log(val,e)
            },
            two(){
               console.log("鼠标移入事件") 
            },
            show(){
                console.log("回车触发")
            },
            father(){
                console.log("我是地欸的")
            },
            son(){
                console.log("儿子")
            }
        },
    }
</script>
<style scoped lang="scss">
    .father{
        width: 200px;
        height: 200px;
        background-color: green;
        .son{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    }
</style>